<template>
	<public-view navType="other" :navTitle="title">
		<view class="content flex f-d-c a-i-c">
			<view class="top-bar w-100 f-s-24 flex a-i-c">
				<block v-for="(item,index) in second_list" :key="index">
					<view @click="chooseItem(item)" :class="item.id === choose_id?'color-2567F3':''">{{item.name}}</view>/
				</block>
			</view>
			<view class="list-box">
				<block v-for="(item, index) in car_list" :key="index">
					<view class="item flex a-i-c color1" @click="goTo({url:'/pages/findCarSearch/carInfo?id='+item.id})">
						<image class="car-logo" :src="item.pic" mode=""></image>
						<view class="car-other ">
							<view class="name f-s-28 line-h-40">
								{{item.name}}
							</view>
							<view class="moneycar f-s-36 f-w-b l-h-38">
								<text style="font-style: italic;">{{item.loan?.payment[0]||""}}-{{item.loan?.payment[1]||""}}.</text><text class="f-s-22 f-w-4">万</text>
							</view>
							<view class="f-s-24" style="color: #949492;">
								{{item.brand_text}}{{item.tag_text}}
							</view>
						</view>
					</view>
				</block>
			</view>
		</view>
	</public-view>
</template>

<script>
	import {goTo} from "@/nav.js"
	export default {
		data() {
			return {
				title:"",
				page_id:"",
				second_list:[],
				choose_id:"",
				car_list:[],
				page:1
			};
		},
		onLoad(options) {
			this.title = options.title
			this.page_id = options.id
			console.log(this.page_id)
			// v1/lorry/getLorryClassByBrand
			this.getSecondList()
		},
		onReachBottom() {
			this.page++
			this.getCarList()
		},
		methods:{
			goTo,
			chooseItem(item){
				this.choose_id = item.id
				this.page = 1
				this.car_list = []
				this.getCarList()
			},
			getSecondList(){
				let that = this
				that.util.postRequest({
					url:'v1/lorry/getLorryClassByBrand',
					data:{
						brand:that.page_id
					}
				}).then(res=>{
					that.second_list = res.data
					that.choose_id = res.data[0].id
					that.getCarList()
				})
			},
			getCarList(){
				let that = this
				that.util.postRequest({
					url:"v1/lorry/index",
					data:{
						page:that.page,
						rows:10,
						class:that.choose_id,
						brand:that.page_id
					}
				}).then(res=>{
					console.log(res)
					if(that.page === 1){
						that.car_list = res.data.data
					}else{
						if(res.data.data.length>0){
							that.car_list = that.car_list.concat(res.data.data)
						}else{
							that.page--
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.list-box{
		width: 100%;
		.item{
			width: 100%;
			padding: 22upx;
			border-radius: 24upxpx;
			margin-bottom: 20upx;
			.car-other{
				.name{
					margin-bottom: 8upx;
				}
				.moneycar{
					margin-bottom: 16upx;
					line-height: 38upx;
					color: #EE8300;
				}
			}
			.car-logo{
				width: 156upx;
				height: 156upx;
				margin-right: 24upx;
				background: #FFFFFF;
				border-radius: 16upx;
			}
		}
		.color1{
			background: linear-gradient(97.86deg, #FFFFFF 40.26%, #EEF8FF 142.28%);
		}
		.color2{
			background: linear-gradient(97.86deg, #FFFFFF 30.12%, #FFF4E9 142.28%);
		}
	}
	.top-bar{
		margin-bottom: 24upx;
		view{
			margin-right: 8upx;
		}
	}
	.content{
		width: 750upx;
		padding: 26upx;
	}
</style>
